<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')" align-center>
        <el-container>
            <el-main>
                <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="110px" label-position="right" style="height:600px;overflow:auto">
                    <el-form-item label="扣款单号" prop="order_no">
                        <el-input v-model="form.order_no" placeholder="请输入扣款单号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="slip_type_id">
                        <el-select v-model="form.slip_type_id" placeholder="请选择退款类型" style="width:100%">
                            <el-option v-for="item in deductionList" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工厂" prop="supplier_id">
                        <el-select v-model="form.supplier_id"  filterable style="width: 100%" placeholder="请选择工厂" clearable>
                            <el-option v-for="item in applyList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="金额" prop="money">
                        <el-input v-model="form.money" placeholder="请输入金额"></el-input>
                    </el-form-item>
                    <el-form-item label="日期" prop="order_time">
                        <el-date-picker v-model="form.order_time" :value-format="'YYYY-MM-DD'" type="data" style="width:100%" placeholder="请选择日期" />
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="other_images">
                        <sc-upload-multiple v-model="form.other_images" draggable></sc-upload-multiple>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-footer>
                <div style="display:flex;justify-content: end;">
                    <el-button @click="visible = false">取 消</el-button>
                    <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">确定</el-button>
                </div>
            </el-footer>
        </el-container>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '添加扣款单',
				edit: '编辑扣款单',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
            form: {
                id:"",
                order_no:"",
                supplier_id:"",
                slip_type_id:"",
                order_time:"",
                money:"",
                remark:"",
                other_images:"",
            },
            //验证规则
            rules: {
                order_no: [
                    {required: true, message: '请输入扣款单号'}
                ],
                supplier_id: [
                    {required: true, message: '请选择工厂'}
                ],
                slip_type_id: [
                    {required: true, message: '请选择扣款类型'}
                ],
                order_time: [
                    {required: true, message: '请选择日期'}
                ],
                money: [
                    {required: true, message: '请输入金额'}
                ],
            },
            applyList: [],
            deductionList:[],
		}
	},
	mounted() {
        this.getApply()
        this.getDeduc()
    },
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
            if (valid) {
                this.isSaveing = true;
                var res = [];
                if (this.form.id) {
                    res = await this.$API.inventory.getDeduction.edit.post(this.form);
                } else {
                    res = await this.$API.inventory.getDeduction.add.post(this.form);
                }
                this.isSaveing = false;
                if (res.code == 1) {
                    this.$emit('success', this.form, this.mode)
                    this.visible = false;
                    this.$message.success("操作成功")
                } else {
                    this.$alert(res.message, "提示", { type: 'error' })
                }
                } else {
                    return false;
                }
            })
		},
        //表单注入数据
		async setData(data) {
			this.form.id = data.id
			this.form.order_no = data.order_no
			this.form.slip_type_id = data.slip_type_id
			this.form.supplier_id = data.supplier_id
			this.form.money = data.money
			this.form.order_time = data.order_time
			this.form.remark = data.remark
			this.form.other_images = (data.other_images).toString()
		},
        // 获取工厂
        async getApply(){
            var res = await this.$API.all.Apply.get({type:1});
            this.applyList = res.data;
        },
        // 获取扣款原因
        async getDeduc(){
            var res = await this.$API.all.bill.get();
            this.deductionList = res.data;
        },
	}
}
</script>

<style>
.table .selected-row {
  background-color: #F00;
  /* 或者其他样式 */
}
</style>
